<template>
  <div class="app-container">

		<el-row class="main" type="flex" justify="center" v-if="info!=null" style="z-index: 0;">
			<el-col :span="20">
				<div id="artcle-info">
					<h2 class="text-center"><strong>{{info.title}}</strong></h2>
					<!-- 描述：文章信息 -->
					<div class="text-center timeAndView">
						<span class="article-time">
							<i class="el-icon-time"></i>
							发表于：<span>{{info.createTime}}</span>
						</span>
						&nbsp;|&nbsp;
						<span class="article-views">
							<i class="el-icon-view"></i>
							阅读量：<span>{{info.readCount}}</span>
						</span>
					</div>
					<!-- 					<p class="abstract">
						前言：swagger2功能非常强大，用自己的一句话概括：它是一个构建强大的RESTful API文档以及调试的框架。
					</p> -->
				</div>
				<hr />
				<div id="artcle-content">
					<div  v-html="info.content">
					</div>
				</div>
				<div id="statement">
					<div class="item">{{info.author}}</div>
					<div class="item">{{info.originalLink}}
						<a href="https://www.fengziy.cn/">https://www.fengziy.cn/</a>
					</div>
					<div class="item">{{info.notes}}：本博客所有文章除特别声明外,转载请注明出处!</div>
				</div>
			</el-col>
		</el-row>

    <!-- 添加或修改分集剧情对话框 -->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="集数" prop="number">
          <el-input v-model="form.number" placeholder="请输入集数" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="describes">
          <el-input v-model="form.describes" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="剧本" prop="scriptId">
          <el-select v-model="form.scriptId" placeholder="请选择剧本">
            <el-option v-for="dict in scriptList" :key="dict.id" :label="dict.name" :value="parseInt(dict.id)">
            </el-option>
          </el-select>
           <el-input v-model="form.scriptId" placeholder="请输入剧本id" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <editor v-model="form.content" :min-height="192" />
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input v-model="form.notes" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

    </el-dialog> -->

  </div>
</template>

<script>
  import {
    getScriptEpisode,
    updateScriptEpisode
  } from "@/api/yrk/scriptEpisode";
  import {
    listScript
  } from "@/api/yrk/script";
  import {
    getToken
  } from "@/utils/auth";

  export default {
    name: "ScriptEpisode",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,

        info: null,
        // 是否显示弹出层
        open: false,
        scriptList: [],
        // 查询参数
        id: null,
        // 表单参数
        form: {},
      };
    },
    created() {

      this.getDicts("status").then(response => {
        this.statusOptions = response.data;
      });

    },
    mounted: function() {
      console.log(this.$route.query.id)
      if (this.$route.query.id != undefined) {
        this.id = this.$route.query.id
        this.getInfo()
      }
      this.$nextTick(function() {
        // 仅在整个视图都被渲染之后才会运行的代码
      })
    },
    methods: {
      /** 查询分集剧情列表 */
      getInfo() {
        this.loading = true;

        getScriptEpisode(this.id).then(response => {
          this.info = response.data;
          this.loading = false;
        });
      },
      // 状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status);
      }

    }
  };
</script>
